<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <view :class="data.show_attr_picker?'no-scroll':''">
            <navigator hoverClass="none" :url="'/pages/pt/details/details?gid='+data.goods.id+in_group||data.group_fail>0?'':'&oid='+data.oid+'&group_id='+data.group_id">
                <view class="goods flex-row">
                    <view class="goods-pic flex-grow-0">
                        <image :src="data.goods.cover_pic"></image>
                    </view>
                    <view class="goods-info flex-grow-1 flex-col">
                        <view class="goods-info-title flex-grow-0">
                            {{data.goods.name}}
                        </view>
                        <view class="goods-money flex-grow-0 flex-row flex-y-bottom">
                            <view class="goods-price flex-grow-0 flex-y-bottom">
                                ¥
                                <text>{{data.goods.price}}</text>
                            </view>
                            <view class="goods-original-price flex-grow-0 flex-y-bottom">
                                ¥{{data.goods.original_price}}
                            </view>
                        </view>
                        <view class="goods-label flex-row">
                            <view class="goods-limit flex-grow-0">
                                {{data.goods.group_num}}人团
                            </view>
                            <view class="goods-omit flex-grow-0">
                                拼团省{{data.reduce_price}}
                            </view>
                        </view>
                    </view>
                    <view class="pt-status-pic">
                        <image :src="data.__wxapp_img.pt.success.url" v-if="data.group_fail==1"></image>
                        <image :src="data.__wxapp_img.pt.fail.url" v-if="data.group_fail==2"></image>
                    </view>
                </view>
            </navigator>
            <view class="pt-group-shell">
                <view class="flex-col pt-group" style="height:auto">
                    <view class="flex-grow-0 top-title flex-x-center" v-if="data.group_fail==0">
                        还剩
                        <text>{{data.surplus}}</text> 人，仅剩
                        <text>{{data.limit_time.days}}：{{data.limit_time.hours}} ：{{data.limit_time.mins}}：{{data.limit_time.secs}}</text> 失效
                    </view>
                    <view class="flex-grow-0 top-title flex-x-center" v-if="data.group_fail==2">
                        超过有效时间，
                        <text>拼团失败</text>
                    </view>
                    <view class="flex-grow-0 top-title flex-x-center" v-if="data.group_fail==1">
                        拼团成功
                    </view>
                    <image :src="data.__wxapp_img.pt.group_bg.url" style="position:absolute;left:0;top:0;width:702upx;height:214upx;"></image>
                    <view class="head-pic flex-grow-0 flex-y-center flex-x-center">
                        <block v-for="(item,index) in data.groupList" :key="index">
                            <view class="head-pic-item flex-grow-0" v-if="index==0">
                                <image :src="item.avatar_url" style="border:2upx solid #ff5c5c;"></image>
                                <view class="group-frist flex-x-center flex-y-center">团长</view>
                            </view>
                            <view class="head-pic-item flex-grow-0" v-else>
                                <image :src="item.avatar_url" v-if="item.avatar_url!=0"></image>
                                <image :src="data.__wxapp_img.pt.no_group_num.url" v-else></image>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
            <view class="play-btn">
                <button @tap="showShareModal" class="pt_btn flex-y-center flex-x-center" :data-id="data.oid" v-if="data.group_fail==0&&data.in_group==true">
                    邀请好友
                </button>
                <button @tap="goToGoodsDetails" class="pt_btn flex-y-center flex-x-center" :data-id="data.oid" v-if="data.group_fail==1&&data.in_group==true">
                    一键开团
                </button>
                <view @tap="buyNow" class="pt_btn flex-y-center flex-x-center" v-if="data.group_fail==0&&data.in_group==false">
                    我要参团
                </view>
            </view>
            <view @tap="goArticle" class="group-notice flex-row flex-y-center">
                <view class="group-notice-left flex-grow-1">
                    拼团须知
                </view>
                <view class="group-notice-info flex-gorw-1">
                    .好友参团 .人满发货 .人不满退款
                </view>
                <view class="goods-right flex-grow-0">
                    <image :src="data.__wxapp_img.share.right.url"></image>
                </view>
            </view>
            <view class="goods-list">
                <view @tap="goToHome" class="goods-more flex-row flex-y-center">
                    <view class="goods-more-left  flex-grow-1">
                        更多拼团
                    </view>
                    <view class="group-notice-info flex-gorw-1">
                        更多
                    </view>
                    <view class="goods-right flex-gorw-1">
                        <image :src="data.__wxapp_img.share.right.url"></image>
                    </view>
                </view>
                <navigator class="list-item flex-row" openType="navigate" :url="'/pages/pt/details/details?gid='+item.id" v-for="(item,index) in data.goods_list" :key="index">
                    <view class="flex-grow-0 corver-pic">
                        <image :src="item.cover_pic"></image>
                    </view>
                    <view class="flex-grow-1 flex-col">
                        <view class="flex-grow-1 goods-title">
                                {{item.name}}
                            </view>
                        <view class="flex-grow-0 flex-row">
                            <view class="goods-sales">
                                    已团 {{item.virtual_sales}}
                                </view>
                        </view>
                        <view class="flex-grow-0 flex-row flex-y-bottom">
                            <view class="flex-grow-0 price flex-row flex-y-bottom">
                                <view class="unit flex-grow-0 flex-y-bottom">
                                        ¥
                                    </view>
                                <view class="flex-grow-1 flex-y-bottom">{{item.price}}</view>
                            </view>
                            <view class="flex-grow-1 old-price flex-y-bottom">
                                    ¥ {{item.original_price}}
                                </view>
                            <view class="flex-grow-0 group-btn flex-x-center flex-y-center">
                                    去开团
                                </view>
                        </view>
                    </view>
                </navigator>
            </view>
        </view>
        <view class="attr-picker" v-if="data.show_attr_picker">
            <view class="content-box">
                <view class="flex-row" style="border-bottom: 1upx solid #e3e3e3;padding: 24upx 28upx">
                    <view class="flex-grow-0">
                        <view class="goods-pic-box">
                            <image mode="aspectFill" :src="data.goods.attr_pic" v-if="data.goods.attr_pic"></image>
                            <image mode="aspectFill" :src="data.goods.cover_pic" v-else></image>
                        </view>
                    </view>
                    <view class="flex-grow-1" style="padding: 0 24upx">
                        <view style="color:#ff4544;margin-bottom: 12upx;font-weight: bold">￥{{data.goods.price}}</view>
                        <view style="font-size:9pt">
                            库存{{data.goods.num}}
                        </view>
                    </view>
                    <view class="flex-grow-0">
                        <view @tap="hideAttrPicker" class="flex-x-center flex-y-center" style="width: 100upx;height: 100upx">
                            <image :src="data.__wxapp_img.dapp.close.url" style="width: 30upx;height: 30upx"></image>
                        </view>
                    </view>
                </view>
                <scroll-view scrollY="true" style="max-height: 650upx;">
                    <view style="padding: 24upx 28upx">
                        <view>
                            <view class="attr-group" v-if="data.attr_group.attr_list.length>0" v-for="(attr_group,index) in data.attr_group_list" :key="index">
                                <view class="attr-group-name">{{attr_group.attr_group_name}}</view>
                                <view class="attr-list">
                                    <text @tap="attrClick" :class="['attr-item', item.checked?'active':'']" :data-group-id="attr_group.attr_group_id" :data-id="item.attr_id" v-for="(item,i) in attr_group.attr_list" :key="i">{{item.attr_name}}
                                </text>
                                </view>
                            </view>
                        </view>
                        <view style="height: 0;border-bottom: 1upx solid #e3e3e3;margin-bottom: 40upx"></view>
                        <view style="padding-bottom: 40upx">
                            <view class="flex-row flex-y-center mb-20">
                                <view class="flex-grow-1">数量</view>
                                <view class="flex-grow-0">
                                    <view class="flex-row number-input-box">
                                        <view @tap="numberSub" :class="['flex-grow-0 flex-x-center flex-y-center number-btn number-sub', data.form.number<=1?'disabled':'']">-
                                        </view>
                                        <view class="flex-grow-0">
                                            <input @blur="numberBlur" class="flex-grow-1 number-input" min="1" step="1" type="number" :value="data.form.number"></input>
                                        </view>
                                        <view @tap="numberAdd" class="flex-grow-0 flex-x-center flex-y-center number-btn number-add">+
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view @tap="buyNow" class="flex-row buy-confirm flex-y-center flex-x-center">
                    确认
                </view>
            </view>
        </view>
        <view :class="['share-modal', data.share_modal_active]">
            <view class="share-modal-body">
                <view class="flex-row">
                    <view class="flex-grow-1 flex-x-center">
											<!-- #ifdef MP-WEIXIN -->
											<button class="share-bottom" openType="share" style="height:100%">
                            <image :src="data.__wxapp_img.share.friend.url"></image>
                            <view>分享给朋友</view>
                        </button>
											<!-- #endif -->
                        <!-- #ifdef H5 -->
                        <button class="share-bottom" @click="onShareWebMessage" style="height:100%">
                              <image :src="data.__wxapp_img.share.friend.url"></image>
                              <view>分享给朋友</view>
                          </button>
                        <!-- #endif -->
                    </view>
                    <view class="flex-grow-1 flex-x-center">
                        <view @tap="getGoodsQrcode" class="share-bottom">
                            <image :src="data.__wxapp_img.share.qrcode.url"></image>
                            <view>生成商品海报</view>
                        </view>
                    </view>
                </view>
                <view @tap="shareModalClose" class="share-modal-close flex-y-center flex-x-center">关闭</view>
            </view>
        </view>
        <view :class="['goods-qrcode-modal', data.goods_qrcode_active]">
            <view class="goods-qrcode-body flex-col">
                <view class="flex-grow-1" style="position: relative">
                    <view style="position: absolute;left: 0;top:0;width: 100%;height: 100%;padding: 100upx 100upx 60upx">
                        <view class="goods-qrcode-box">
                            <view class="goods-qrcode-loading flex-x-center flex-y-center">
                                <view class="flex-x-center flex-col">
                                    <image :src="data.__wxapp_img.system.loading2.url" style="width: 150upx;height: 150upx"></image>
                                    <view style="color: #888">海报生成中</view>
                                </view>
                            </view>
                            <image @tap="goodsQrcodeClick" :class="['goods-qrcode', data.goods_qrcode?'active':'']" :data-src="data.goods_qrcode" mode="aspectFill" :src="data.goods_qrcode"></image>
                        </view>
                    </view>
                </view>
                <view class="flex-grow-0 flex-col flex-x-center" style="padding: 0 60upx 80upx">
                    <view style="margin-bottom: 20upx;padding: 0 40upx">
                        <button @tap="saveGoodsQrcode" style="background: #ff4544;color: #fff;" v-if="data.goods_qrcode">
                            保存图片
                        </button>
                        <button style="opacity: .4" v-else>保存图片</button>
                    </view>
                    <view style="color: #888;font-size: 9pt;text-align: center">保存至相册可以分享给朋友</view>
                </view>
                <view @tap="goodsQrcodeClose" class="goods-qrcode-close">
                    <image :src="data.__wxapp_img.dapp.close2.url" style="width: 50upx;height: 50upx;display: block"></image>
                </view>
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	function t(t, e, o) {
    return e in t ? Object.defineProperty(t, e, {
        value: o,
        enumerable: !0,
        configurable: !0,
        writable: !0
    }) : t[e] = o, t;
}
var e, o = require("../../../utils/helper.js");
	export default {
		data() {
			return {
				data: {
        groupFail: 0,
        show_attr_picker: !1,
        form: {
            number: 1
        }
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = t.user_id, a = decodeURIComponent(t.scene);
        if (void 0 !== e) e; else if (void 0 !== a) {
            var i = o.scene_decode(a);
            i.uid && i.oid ? (i.uid, t.oid = i.oid) : a;
        } else if ("undefined" != typeof my && null !== myVue.getApp.query) {
            var r = myVue.getApp.query;
            myVue.getApp.query = null, t.oid = r.oid, r.uid;
        }
        this.setData({
            oid: t.oid
        }), this.getInfo(t);
    },
    onReady: function() {},
    onShow: function() {},
    onHide: function() {},
    onUnload: function() {},
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
    onShareAppMessage: function(t) {
        myVue.getApp.page.onShareAppMessage(this);
        var e = this, o = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO), a = "/pages/pt/group/details?oid=" + e.data.oid + "&user_id=" + o.id;
        return {
            title: "快来" + e.data.goods.price + "元拼  " + e.data.goods.name,
            path: a,
            success: function(t) {}
        };
    },
		methods: {
			getInfo: function(t) {
        var e = t.oid, o = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.group_info,
            method: "get",
            data: {
                oid: e
            },
            success: function(t) {
                if (0 == t.code) {
                    0 == t.data.groupFail && o.countDownRun(t.data.limit_time_ms);
                    var e = (t.data.goods.original_price - t.data.goods.price).toFixed(2);
                    o.setData({
                        goods: t.data.goods,
                        groupList: t.data.groupList,
                        surplus: t.data.surplus,
                        limit_time_ms: t.data.limit_time_ms,
                        goods_list: t.data.goodsList,
                        group_fail: t.data.groupFail,
                        oid: t.data.oid,
                        in_group: t.data.inGroup,
                        attr_group_list: t.data.attr_group_list,
                        group_rule_id: t.data.groupRuleId,
                        reduce_price: e < 0 ? 0 : e,
                        group_id: t.data.goods.class_group
                    }), 0 != t.data.groupFail && t.data.inGroup && o.setData({
                        oid: !1,
                        group_id: !1
                    }), o.selectDefaultAttr();
                } else o.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && o.getApp.core.redirectTo({
                            url: "/pages/pt/index/index"
                        });
                    }
                });
            },
            complete: function(t) {
                setTimeout(function() {
                    o.getApp.core.hideLoading();
                }, 1e3);
            }
        });
    },
    selectDefaultAttr: function() {
        var t = this;
        if (!t.data.goods || 0 === t.data.goods.use_attr) for (var e in t.data.attr_group_list) for (var o in t.data.attr_group_list[e].attr_list) 0 == e && 0 == o && (t.data.attr_group_list[e].attr_list[o].checked = !0);
        t.setData({
            attr_group_list: t.data.attr_group_list
        });
    },
    countDownRun: function(t) {
        var e = this;
        setInterval(function() {
            var o = new Date(t[0], t[1] - 1, t[2], t[3], t[4], t[5]) - new Date(), a = parseInt(o / 1e3 / 60 / 60 / 24, 10), i = parseInt(o / 1e3 / 60 / 60 % 24, 10), r = parseInt(o / 1e3 / 60 % 60, 10), s = parseInt(o / 1e3 % 60, 10);
            a = e.checkTime(a), i = e.checkTime(i), r = e.checkTime(r), s = e.checkTime(s), 
            e.setData({
                limit_time: {
                    days: a,
                    hours: i,
                    mins: r,
                    secs: s
                }
            });
        }, 1e3);
    },
    checkTime: function(t) {
        return (t = t > 0 ? t : 0) < 10 && (t = "0" + t), t;
    },
    goToHome: function() {
        myVue.getApp.core.redirectTo({
            url: "/pages/pt/index/index"
        });
    },
    goToGoodsDetails: function(t) {
        var e = this;
        myVue.getApp.core.redirectTo({
            url: "/pages/pt/details/details?gid=" + e.data.goods.id
        });
    },
    hideAttrPicker: function() {
        this.setData({
            show_attr_picker: !1
        });
    },
    showAttrPicker: function() {
        this.setData({
            show_attr_picker: !0
        });
    },
    attrClick: function(t) {
        var e = this, o = t.target.dataset.groupId, a = t.target.dataset.id, i = e.data.attr_group_list;
        for (var r in i) if (i[r].attr_group_id == o) for (var s in i[r].attr_list) i[r].attr_list[s].attr_id == a ? i[r].attr_list[s].checked = !0 : i[r].attr_list[s].checked = !1;
        e.setData({
            attr_group_list: i
        });
        var d = [], n = !0;
        for (var r in i) {
            var c = !1;
            for (var s in i[r].attr_list) if (i[r].attr_list[s].checked) {
                d.push(i[r].attr_list[s].attr_id), c = !0;
                break;
            }
            if (!c) {
                n = !1;
                break;
            }
        }
        n && (myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.goods_attr_info,
            data: {
                goods_id: e.data.goods.id,
                group_id: e.data.goods.class_group,
                attr_list: JSON.stringify(d)
            },
            success: function(t) {
                if (e.getApp.core.hideLoading(), 0 == t.code) {
                    var o = e.data.goods;
                    o.price = t.data.price, o.num = t.data.num, o.attr_pic = t.data.pic, e.setData({
                        goods: o
                    });
                }
            }
        }));
    },
    buyNow: function() {
        this.submit("GROUP_BUY_C");
    },
    submit: function(t) {
        var e = this;
        if (!e.data.show_attr_picker) return e.setData({
            show_attr_picker: !0
        }), !0;
        if (e.data.form.number > e.data.goods.num) return myVue.getApp.core.showToast({
            title: "商品库存不足，请选择其它规格或数量",
            image: "/static/images/icon-warning.png"
        }), !0;
        var o = e.data.attr_group_list, a = [];
        for (var i in o) {
            var r = !1;
            for (var s in o[i].attr_list) if (o[i].attr_list[s].checked) {
                r = {
                    attr_id: o[i].attr_list[s].attr_id,
                    attr_name: o[i].attr_list[s].attr_name
                };
                break;
            }
            if (!r) return myVue.getApp.core.showToast({
                title: "请选择" + o[i].attr_group_name,
                image: "/static/images/icon-warning.png"
            }), !0;
            a.push({
                attr_group_id: o[i].attr_group_id,
                attr_group_name: o[i].attr_group_name,
                attr_id: r.attr_id,
                attr_name: r.attr_name
            });
        }
        e.setData({
            show_attr_picker: !1
        }), myVue.getApp.core.redirectTo({
            url: "/pages/pt/order-submit/order-submit?goods_info=" + JSON.stringify({
                goods_id: e.data.goods.id,
                attr: a,
                num: e.data.form.number,
                type: t,
                parent_id: e.data.oid,
                deliver_type: e.data.goods.type,
                group_id: e.data.goods.class_group
            })
        });
    },
    numberSub: function() {
        var t = this, e = t.data.form.number;
        if (e <= 1) return !0;
        e--, t.setData({
            form: {
                number: e
            }
        });
    },
    numberAdd: function() {
        var t = this, e = t.data.form.number;
        ++e > t.data.goods.one_buy_limit && 0 != t.data.goods.one_buy_limit ? myVue.getApp.core.showModal({
            title: "提示",
            content: "最多只允许购买" + t.data.goods.one_buy_limit,
            showCancel: !1
        }) : t.setData({
            form: {
                number: e
            }
        });
    },
    numberBlur: function(t) {
        var e = this, o = t.detail.value;
        if (o = parseInt(o), isNaN(o) && (o = 1), o <= 0 && (o = 1), o > e.data.goods.one_buy_limit && 0 != e.data.goods.one_buy_limit) return myVue.getApp.core.showModal({
            title: "提示",
            content: "最多只允许购买" + e.data.goods.one_buy_limit + "件",
            showCancel: !1
        }), void e.setData({
            form: {
                number: o
            }
        });
        e.setData({
            form: {
                number: o
            }
        });
    },
    goArticle: function(t) {
        this.data.group_rule_id && myVue.getApp.core.navigateTo({
            url: "/pages/article-detail/article-detail?id=" + this.data.group_rule_id
        });
    },
    showShareModal: function(t) {
        this.setData({
            share_modal_active: "active",
            no_scroll: !0
        });
    },
    shareModalClose: function() {
        this.setData({
            share_modal_active: "",
            no_scroll: !1
        });
    },
    getGoodsQrcode: function() {
        var t = this;
        if (t.setData({
            goods_qrcode_active: "active",
            share_modal_active: ""
        }), t.data.goods_qrcode) return !0;
        myVue.getApp.request({
            url: myVue.getApp.api.group.order.goods_qrcode,
            data: {
                order_id: t.data.oid
            },
            success: function(e) {
                0 == e.code && t.setData({
                    goods_qrcode: e.data.pic_url
                }), 1 == e.code && (t.goodsQrcodeClose(), t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm;
                    }
                }));
            }
        });
    },
    goodsQrcodeClose: function() {
        this.setData({
            goods_qrcode_active: "",
            no_scroll: !1
        });
    },
		saveGoodsQrcode: function(){
			var t = this;
    myVue.getApp.core.saveImageToPhotosAlbum ? (myVue.getApp.core.showLoading({
        title: "正在保存图片",
        mask: !1
    }), myVue.getApp.core.downloadFile({
        url: t.data.goods_qrcode,
        success: function(t) {
            myVue.getApp.core.showLoading({
                title: "正在保存图片",
                mask: !1
            }), myVue.getApp.core.saveImageToPhotosAlbum({
                filePath: t.tempFilePath,
                success: function() {
                    myVue.getApp.core.showModal({
                        title: "提示",
                        content: "商品海报保存成功",
                        showCancel: !1
                    });
                },
                fail: function(t) {
                    myVue.getApp.core.showModal({
                        title: "图片保存失败",
                        content: t.errMsg,
                        showCancel: !1
                    });
                },
                complete: function(t) {
                    myVue.getApp.core.hideLoading();
                }
            });
        },
        fail: function(e) {
            myVue.getApp.core.showModal({
                title: "图片下载失败",
                content: e.errMsg + ";" + t.data.goods_qrcode,
                showCancel: !1
            });
        },
        complete: function(t) {
            myVue.getApp.core.hideLoading();
        }
    })) : myVue.getApp.core.showModal({
        title: "提示",
        content: "当前版本过低，无法使用该功能，请升级到最新版本后重试。",
        showCancel: !1
    });
		},
		goodsQrcodeClick: function(){
			var e = t.currentTarget.dataset.src;
			myVue.getApp.core.previewImage({
					urls: [ e ]
			});
		},
		onShareWebMessage: function(t) {
		    myVue.getApp.page.onShareAppMessage(this);
		    var e = this, o = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO), a = "/pages/pt/group/details?oid=" + e.data.oid + "&user_id=" + o.id;
				this.$webShare({
					title: "快来" + e.data.goods.price + "元拼  " + e.data.goods.name,
					path: a,
				}).then(function() {
					
				})
		},
		},
	}
</script>

<style scoped>
.goods {
    background-color: #fff;
    padding: 24upx 24upx 0 24upx;
    position: relative;
}

.pt-status-pic image {
    width: 140upx;
    height: 140upx;
}

.pt-status-pic {
    position: absolute;
    top: 112upx;
    right: 24upx;
    z-index: 999;
}

.goods-pic image {
    width: 260upx;
    height: 260upx;
    margin-right: 24upx;
}

.goods-info-title {
    font-size: 11pt;
    color: #353535;
}

.goods-price {
    font-size: 10pt;
    color: #ff5c5c;
}

.goods-price text {
    font-size: 18pt;
}

.goods-original-price {
    font-size: 9pt;
    color: #a4a4a4;
    text-decoration: line-through;
    margin-left: 10upx;
}

.goods-money {
    margin-top: 20upx;
    line-height: 1;
}

.goods-label {
    margin: 10upx 0;
    color: #ff5c5c;
    font-size: 9pt;
}

.goods-limit {
    padding: 0 12upx;
    background-color: #feeeee;
    margin-right: 8upx;
}

.goods-omit {
    background-color: #feeeee;
    padding: 0 12upx;
}

.pt-group {
    width: 702upx;
    position: relative;
    background-color: #ffe7e7;
    min-height: 214upx;
}

.pt-group-shell {
    margin-top: 24upx;
    padding: 0 24upx;
}

.top-title {
    font-size: 10pt;
    color: #353535;
    padding-top: 52upx;
}

.top-title text {
    color: #ff5c5c;
}

.head-pic {
    padding: 34upx 40upx 0 40upx;
    flex-wrap: wrap;
}

.head-pic-item {
    position: relative;
    margin: 10upx 8upx;
    width: 70upx;
    height: 70upx;
}

.head-pic image {
    width: 70upx;
    height: 70upx;
    border-radius: 35upx;
}

.group-frist {
    width: 56upx;
    height: 26upx;
    background-color: #ff5c5c;
    color: #fff;
    font-size: 6pt;
    border-radius: 13upx;
    position: absolute;
    top: 56upx;
    left: 7upx;
}

.play-btn {
    margin: 24upx 24upx 32upx 24upx;
}

.play-btn .pt_btn {
    height: 88upx;
    background-color: #ff5c5c;
    border-radius: 10upx;
    color: #fff;
    font-size: 13pt;
}

.button::after {
    content: normal!important;
}

.group-notice,.goods-more {
    height: 90upx;
    padding: 0 24upx;
    background-color: #fff;
}

.group-notice-left {
    font-size: 10pt;
    color: #353535;
}

.group-notice-info {
    font-size: 9pt;
    color: #919191;
}

.goods-right image {
    width: 16upx;
    height: 26upx;
    margin-left: 20upx;
}

.goods-more {
    margin-top: 20upx;
    border-bottom: 1upx solid #e2e2e2;
}

.list-item {
    padding: 24upx;
    border-bottom: 1upx solid #e2e2e2;
    background-color: #fff;
}

.list-item .corver-pic image {
    width: 220upx;
    height: 220upx;
    border-radius: 5upx;
    margin-right: 24upx;
}

.goods-title {
    color: #353535;
    font-size: 11pt;
}

.list-item .group-item image {
    width: 34upx;
    height: 34upx;
    border: 1upx solid #fff;
    border-radius: 17upx;
}

.list-item .group-item view {
    float: left;
    width: 24upx;
}

.goods-sales {
    font-size: 10pt;
    color: #ff5c5c;
}

.list-item .price {
    color: #ff5c5c;
    font-size: 14pt;
    margin-right: 16upx;
    line-height: 1;
}

.list-item .price .unit {
    font-size: 9pt;
}

.list-item .old-price {
    font-size: 10pt;
    color: #919191;
    text-decoration: line-through;
    line-height: 1;
}

.list-item .group-btn {
    height: 66upx;
    width: 180upx;
    color: #fff;
    font-size: 12pt;
    border-radius: 10upx;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
}

.attr-picker {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.attr-picker .content-box {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: var(--window-bottom);
}

.attr-picker .attr-group {
    margin-bottom: 6upx;
}

.attr-picker .attr-group-name {
    margin-bottom: 20upx;
}

.attr-picker .attr-item {
    display: inline-block;
    margin: 0 30upx 30upx 0;
    background: #f7f7f7;
    border-radius: 10upx;
    padding: 15upx 30upx;
}

.attr-picker .attr-item.active {
    background: #ff4544;
    color: #fff;
}

.attr-picker .goods-pic-box {
    position: relative;
    width: 200upx;
}

.attr-picker .goods-pic-box image {
    position: absolute;
    top: -90upx;
    border: 5upx solid #fff;
    width: 200upx;
    height: 200upx;
    border-radius: 5upx;
    box-shadow: 0 1upx 2upx rgba(0,0,0,0.2);
}

.number-input-box {
    height: 70upx;
}

.number-input-box .number-input {
    height: 70upx!important;
    border: none;
    text-align: center;
    width: 120upx;
    background: #eee;
    margin: 0 4upx!important;
}

.number-input-box .number-btn {
    height: 100%!important;
    width: 70upx;
    background: #eee;
}

.number-input-box .number-btn.disabled {
    background: #f6f6f6;
    color: #aaa;
}

.buy-confirm {
    height: 90upx;
    background-color: #ff5c5c;
    color: #fff;
    font-size: 12pt;
}

share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.0);
    z-index: 1000;
    transform: translateY(100%);
    transition: background 250ms;
}

.share-modal .share-modal-body {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
    background: #f2f2f2;
    padding-top: 60upx;
    transform: translateY(100%);
    transition: transform 250ms;
}

.share-modal.active {
    background: rgba(0,0,0,0.5);
}

.share-modal.active .share-modal-body {
    transform: translateY(0);
}

.share-modal .share-bottom {
    text-align: center;
    font-size: 9pt;
    margin: 0;
    padding: 0;
    margin-bottom: 60upx;
    line-height: inherit;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    display: inline-block;
}

.share-modal .share-bottom:after {
    display: none;
}

.share-modal .share-bottom image {
    width: 120upx;
    height: 120upx;
    margin-bottom: 12upx;
    border-radius: 999upx;
    border: 1upx solid #eee;
}

.share-modal .share-bottom:active image {
    opacity: 0.7;
}

.share-modal .share-modal-close {
    background: #fff;
    height: 100upx;
    border-top: 1upx solid #eee;
}

.goods-qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    padding: 40upx;
    transform: translateY(100%);
    opacity: 0.5;
    transition: opacity 250ms;
}

.goods-qrcode-modal.active {
    transform: translateY(0);
    opacity: 1;
}

.goods-qrcode-body {
    background: #fff;
    height: 100%;
    border-radius: 10upx;
    z-index: 99999;
}

.goods-qrcode-modal .goods-qrcode-box {
    height: 100%;
    position: relative;
    box-shadow: 0 0 15upx rgba(0,0,0,0.15);
}

.goods-qrcode-modal .goods-qrcode-loading {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.goods-qrcode-modal .goods-qrcode {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
}

.goods-qrcode-modal .goods-qrcode.active {
    display: block;
}

.goods-qrcode-modal .goods-qrcode-close {
    position: absolute;
    top: 40upx;
    right: 40upx;
    padding: 15upx;
}
</style>
